<!-- 邀请组件 -->
<template>
  <a-modal
    :visible="innerVisible"
    :title="$t('all.autotext601')"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-form-model
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="formData"
      ref="formRef"
      :rules="formRules"
    >
      <a-form-model-item :label="$t('all.autotext709')" prop="phone" style="display: flex;">
        <a-input v-model="formData.phone" @change="e => handleInputChange(e.target.value)" :placeholder="$t('all.autotext396')" />
        <div style="display: flex">
          <div :style="{ marginRight: '10px' }">{{ $t('all.autotext5') }}?</div>
          <div><a @click="addFast">{{ $t('all.autotext373') }}</a></div>
        </div>
      </a-form-model-item>
      <a-form-item :label="$t('all.autotext551')">
        <a-input v-model="formData.account" disabled width="100%"/>
      </a-form-item>
      <a-form-item :label="$t('all.autotext977')">
        <a-input v-model="formData.name" disabled width="100%"/>
      </a-form-item>
      <a-form-item :label="$t('all.autotext374')">
        <a-select v-model="formData.roleId" :disabled="true">
          <a-select-option v-for="item in rolesList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-row :gutter="48">
        <a-col :md="24" :sm="24">
          <a-button
            type="primary"
            :loading="submitting"
            @click="handleInvitation"
            style="float: right"
            :disabled="isSend"
          >
            {{ $t('all.autotext1162') }}
          </a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <AddDrawer :addFastVisible="addFastVisible" @closeDrawer="closeDrawer" />
  </a-modal>
</template>

<script>
import AddDrawer from './components/AddDrawer'
import { getAdminMessage, sendInvitation } from '@/api/common'
import { getNewRolesList } from '@/api/overview/member'
import modalMixin from '@/utils/modal.mixin'

export default {
  mixins: [modalMixin],
  props: {
    projectId: { // 项目Id
      type: [String, Number],
      default: null
    }
  },
  components: {
    AddDrawer
  },
  data () {
    return {
      proId: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      rolesList: [],
      isSend: true,
      formData: {},
      invitationData: {},
      formRules: {
        phone: [
          { required: true, message: this.$t('all.autotext396'), trigger: 'change' },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: this.$t('all.autotext140') }
        ],
        proUserNo: [
          { required: true, message: this.$t('all.autotext702'), trigger: 'change' },
          { pattern: /^[0-9a-zA-Z-_]{1,}$/, message: this.$t('all.autotext338') }
        ]
      },
      submitting: false,
      addFastVisible: false
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
  },
  methods: {
    modalInit () {
      this.getNewRolesList()
    },
    // 点击快捷创建弹窗
    addFast () {
      this.addFastVisible = true
    },
    // 新建弹窗关闭
    closeDrawer () {
      this.addFastVisible = false
    },
    // 获取角色列表
    getNewRolesList () {
      if (this.$route.query && this.proId) {
        getNewRolesList({ proId: this.proId })
          .then(res => {
            if (res && res.length) {
              const target = res.find(item => item.code === 'PROJECT_ADMIN')
              this.rolesList = [target]
              this.formData.roleId = target.id
            }
          })
      }
    },
    // 手机号码输入框改变
    handleInputChange (value) {
      if (value.length === 11) {
        // 请求接口
        getAdminMessage({ phone: value })
          .then(res => {
            if (res && res.id) { // 判断是否返回了数据 （判断是否有id即可）
              this.formData.userId = res.id
              this.formData.name = res.name
              this.formData.account = res.account
              this.isSend = false
            } else {
              this.$message.error(this.$t('all.autotext5'))
            }
          })
      } else {
        this.formData.userId = null
        this.formData.name = null
        this.formData.account = null
        this.isSend = true
      }
    },
    // 点击发送邀请
    handleInvitation () {
      // if (!this.formData.proUserNo) {
      //   this.$message.warning('请填写成员编号')
      //   return false
      // }
      this.invitationData.proId = this.projectId || this.proId // 父组件传过来的项目id
      this.invitationData.type = 1 // 项目负责人
      this.invitationData.phone = this.formData.phone // 输入的电话号码
      this.invitationData.invitedUserId = this.formData.userId // 根据电话号码获取的被邀请人id
      this.invitationData.roleId = this.formData.roleId
      this.invitationData.pm = 1
      this.invitationData.roleCode = this.$const.ROLE_TYPE.PROJECT_ADMIN.value
      this.invitationData.proUserNo = this.formData.proUserNo
      this.submitting = true
      sendInvitation({ ...this.invitationData })
        .then(res => {
          // 成功发送邀请后，通知父组件刷新列表
          this.submitting = false
          this.handleCancel()
          this.$message.success(this.$t('all.autotext1386'))
          this.$emit('invitCb')
        })
        .catch(() => {
          this.submitting = false
        })
    },
    // 点击取消对话框消失
    handleCancel () {
      this.innerVisible = false
      this.resetForm()
    },
    // 重置数据
    resetForm () {
      this.$refs.formRef.resetFields()
      this.isSend = true
      this.formData = {}
    }
  }
}
</script>
<style scoped lang="scss">

</style>
